<template>
  <el-row :gutter="15">
    <el-col v-bind="styleResponsive ? { lg: 24 } : { span: 24 }">
      <el-card style="overflow: auto"
               shadow="never"
               :body-style="{ height: '333px', minWidth: '311px' }">
        <div slot="header"
             class="flex-between">
          <span>用户收益明细</span>
          <div>
            <!-- <div :class="['ele-inline-block', { 'hidden-xs-only': styleResponsive }]">
          <el-radio-group size="small"
                          @input="todayFn"
                          v-model="labelStatus">
            <el-radio-button :label="0">今天</el-radio-button>
            <el-radio-button :label="1">近七天</el-radio-button>

          </el-radio-group>
        </div> -->
            <!-- <div :class="[
			  'ele-inline-block',
			  { 'hidden-sm-and-down': styleResponsive }
			]"
                 style="width: 260px; margin-left: 10px">
              <el-date-picker unlink-panels
                              type="daterange"
                              class="ele-fluid"
                              @change="selsectTime"
                              :default-time="['00:00:00', '23:59:59']"
                              value-format="yyyy-MM-dd"
                              end-placeholder="结束日期"
                              start-placeholder="开始日期"
                              v-model="datetime"
                              range-separator="至"
                              size="small" />
            </div> -->
          </div>
        </div>
        <div class="ele-cell ele-cell-align-bottom"> </div>

        <div class="padding30"
             v-if="yhtjIncomeList.length">
          <div class="ele-cell"
               v-for="(item, i) in yhtjIncomeList"
               :key="i">
            <div style="width: 50px; white-space: nowrap"
                 class="ele-text-secondary">
              <span class="classificationName font-overflow">{{ item.classificationName }}</span>
            </div>
            <div class="ele-cell-content">
              <div class="marginBottom8">用户充值笔数({{ item.orderCount }}笔)</div>
              <el-progress :percentage="item.orderCount"
                           :stroke-width="12"
                           :show-text="false" />
            </div>
            <div style="width: 80px; white-space: nowrap"
                 class="ele-text-secondary">
              <span> ￥{{ item.amount }}</span>
            </div>
          </div>
        </div>
        <el-empty :image-size="185"
                  v-else
                  description="暂无数据"></el-empty>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { yhtjIncomeDetail } from '@/api/financialManagement/index';
export default {
  data () {
    return {
      datetime: [],
      yhtjIncomeList: [],
      form: {
        siteId: this.$store.state.site.info.id,

        createTimeStart: null,
        createTimeEnd: null
      }
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.init();
  },
  methods: {
    async init () {
      const res = await yhtjIncomeDetail(this.form);
      console.log(res);

      this.yhtjIncomeList = res;
    },
    selsectTime (timeArr) {
      if (timeArr) {
        console.log(timeArr);
        this.form.createTimeStart = timeArr[0];
        this.form.createTimeEnd = timeArr[1];

        //   this.labelStatus = null
        this.init();
      } else {
        this.form.createTimeStart = null;
        this.form.createTimeEnd = null;
        this.init();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ele-cell:not(.ele-cell-align-top) {
  align-items: end;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}
.classificationName {
  width: 60px !important;
  display: inline-block;
}
.marginBottom8 {
  margin-bottom: 6px;
  margin-left: 6px;
  color: #000;
  font-weight: 400;
}
/* 笑脸、哭脸 */
.monitor-face-smile,
.monitor-face-cry {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #fbd971;
  border-radius: 50%;
  position: relative;
}
.padding30 {
  padding: 0 0 30px 0;
  .ele-cell-content {
    padding-right: 24px;
  }
}
.monitor-face-smile > span,
.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry > span,
.monitor-face-cry:before,
.monitor-face-cry:after {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: rotate(225deg);
  border: 3px solid #f0c419;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  position: absolute;
  bottom: 8px;
  left: 11px;
}

.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry:before,
.monitor-face-cry:after {
  content: '';
  width: 6px;
  height: 6px;
  left: 8px;
  top: 14px;
  border-color: #f29c1f;
  transform: rotate(45deg);
}

.monitor-face-smile:after,
.monitor-face-cry:after {
  left: auto;
  right: 8px;
}

.monitor-face-cry > span {
  transform: rotate(45deg);
  bottom: -6px;
}

/* 圆形进度条组合 */
.monitor-progress-group {
  position: relative;
  display: inline-block;

  .el-progress:not(:first-child) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -1px;
  }

  :deep(.el-progress-circle__track) {
    stroke: hsla(0deg, 0%, 60%, 0.15);
  }
}

.monitor-progress-legends > div + div {
  margin-top: 8px;
}
</style>
